As decisões visuais reutilizáveis do ZyronCare — cores, tipografia, formas e componentes. O mesmo sistema veste os dois produtos: o app do profissional de saúde e o painel web do hospital, mantendo a plataforma coerente de ponta a ponta.
Nota de implementação: o Painel do Hospital é construído com shadcn/ui — botões, badges (variante outline), Tabs, tabelas e inputs daqui mapeiam 1:1 para os componentes shadcn, com o tema ZyronCare: primário petróleo, detalhes lima e botões em pílula.
01 — Cores
Paleta
Duas cores, papéis claros: o petróleo assina as ações e ancora textos, ícones e navegação; a lima elétrica pontua seleções ativas, destaques e fundos de card. Superfícies claras mantêm as telas leves para plantões longos.
Marca
Petróleo
Ações · botões, textos, ícones e sidebar
#031A23
Lima
Detalhes · seleções ativas e fundos de destaque
#DAF36F
Superfícies & texto
Fundo do painel
#F6FAF8
Superfície
#FFFFFF
Borda
#E5EDE8
Lavagem lima
#F2FAD2
Tinta
#031A23
Corpo
#41504A
Apoio
#7C8A83
Suave
#9AA6A0
Semânticos
Pares reservados a exceções (alertas, bloqueios e faixas de aviso). O chip de status padrão é branco com borda #E5EDE8 e texto no tom de corpo.
Sucesso / ativo
#D6F5E6 · #031A23
Atenção / pendente
#FDF0CD · #8A5A0B
Informação / agendado
#DEEBFE · #1E40AF
Erro / bloqueio
#FDE3E3 · #9B1C1C
Aplicação
R$ 480,00
Petróleo chapado
cartões de saldo e destaques — valores em lima
Ícone do app
Z petróleo sobre lima — o lima como fundo de destaque
02 — Tipografia
Tipografia
Uma família única — Figtree — do display ao rótulo, no app e no painel. A hierarquia vem de peso e tamanho. Valores em dinheiro são sempre destacados em peso 800.
Aa
Figtree
Sem-serifa geométrica e humanista, sóbria o bastante para dados clínicos e amigável em telas pequenas. Usada em títulos, corpo, tabelas e valores.
Regular
400
Medium
500
SemiBold
600
Bold
700
ExtraBold
800
Título de telaFigtree 800 · 20–30px
Cabeçalho de seção / cardFigtree 700 · 14–17px
Corpo — descrições, células de tabela e textos de apoio.Figtree 400 · 13–14px
Rótulo de campoFigtree 600 · 12px
Cabeçalho de tabelaFigtree 700 · 11px · caps
Dinheiro em destaque — peso 800; lima no escuro, petróleo no claro
R$ 480,00
Saldo na carteira
R$ 300
Valor do plantão no feed
R$ 12.480
Gasto do hospital no mês
03 — Espaço & forma
Espaçamento & raios
Escala base-4 nos dois produtos. Cantos maiores no app (toque), mais contidos no painel (densidade de dados).
Escala de espaçamento
4
8
12
16
20
24
32
48
Raios de canto
sm · 10px — inputs e botões do painel
md · 13px — inputs do app
lg · 14–16px — cards e botões do app
xl · 18px — cartões de destaque
full · 999px — chips de status, filtros e avatares
04 — Componentes
Botões
A ação principal é sempre petróleo cheio, 100% arredondado — uma por tela. O lima fica para seleções e chips ativos. Destrutivas usam contorno vermelho, nunca preenchimento. Toque mínimo de 48px no app.
Hierarquia
Estados & destrutivo
Compactos (40px) são exclusivos do painel web.
Filtros & segmentos
E-mailCPF/CNPJTelefone
Em andamentoAgendadosConcluídos
Pílula lima = seleção única; Tabs shadcn (trilho cinza, item ativo branco) = abas de listagem no painel.
05 — Componentes
Campos & formulários
Rótulo pequeno acima, campo branco de canto médio. Avisos importantes viram faixas coloridas com ícone — nunca texto solto.
Entrada de texto
E-mail
voce@email.com
Em foco
gestor@hospitalalpha.com
Seleção
UTI Adulto
Upload & código
enviar documento (foto ou PDF)
24__
Código 2FA — borda petróleo marca o preenchido.
Faixas de aviso
Os repasses são automáticos após o plantão concluído sem contestação (24h).
Sua nota fiscal é emitida no seu CNPJ. Sem dados fiscais você não recebe.
Você precisa estar a até 150 m do local para fazer check-in.
06 — Componentes
Chips de status
Chips sóbrios por padrão: brancos, com a borda padrão e texto no tom de corpo — o rótulo diferencia o status. Cor semântica é exceção, reservada a alertas como erro e bloqueio.
Ciclo do plantão
Em abertoAceitoCheck-in feitoEm atendimentoEncerrado
Financeiro & documentos
ProcessandoPagoEm análiseAprovadoRecusado
Com ícone & contagem
2,3 kmatualiza a cada 5sFaltam 4 passos
07 — Componentes
Cards & tabelas
No app, tudo é card — borda 1px, sem sombra pesada. No painel, listas são tabelas de linhas com cabeçalho em caps. O degradê é reservado ao dinheiro.
Card de plantão (app)
Hospital Alpha2,3 km
Enfermeiro Pleno · UTI Adulto
R$ 300amanhã · 19h–7h
Saldo disponível
R$ 480,00
Tabela do painel + KPI
3
Plantões hoje
2
Vagas em aberto
R$ 12.480
Gasto no mês
ProfissionalCategoriaHorárioStatus
Ana SouzaEnfermeiro PlenoHoje 19h–7hEm atendimento
Carlos AndradeMédico SêniorHoje 07h–19hCheck-in feito
08 — Componentes
Navegação & ícones
Tab bar flutuante de 4 itens no app; sidebar petróleo no painel. Tab bar com ícones Lucide; demais ícones arredondados de traço único 2 — petróleo quando ativos, cinza-verde quando não.
